<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from 'vue'
import UserStore from "../store/UserStore";
let account = ref('');
let password = ref('');
let router = useRouter();
let loginCheck = () => {
    alert("登录");
    if (account.value == "admin" && password.value == '123') {
        let userStore = UserStore();
        userStore.saveAccount(account.value);
        router.push('/home');
    } else {
        alert("账号密码错误")
    }
}
</script>

<template>
    <div id="bigbox">
        <el-row>
            <el-col :span="24" class="title">
                <h2 style="color: aliceblue;">在企业人事管理平台</h2>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">

            </el-col>
            <el-col :span="6" class="center">
                <div id="loginbox">
                    <div id="logininbox">
                        <div>
                            账号：<el-input v-model="account" style="width: 240px" placeholder="请输入账号" />
                        </div>
                        <div>
                            密码：<el-input v-model="password" style="width: 240px" type="password" placeholder="请输入密码"
                                show-password />
                        </div>
                        <div class="foot">
                            <div><a href="#">忘记密码</a></div>
                            <div><el-button type="primary" @click="loginCheck">登录</el-button></div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="9">

            </el-col>
        </el-row>
    </div>

</template>

<style scoped>
.center {
    display: flex;
    justify-content: center;
}

.title {
    text-align: center;
}

.foot {
    padding: 20px;
    display: flex;
    justify-content: space-around;
}

.foot button {
    background-color: #333;
    color: #fff;
}

.foot button:hover {
    background-color: #000;
}

#bigbox {
    background: linear-gradient(gray, black);
    height: 100%;
}

#logininbox {
    text-align: center;
    justify-content: center;
    width: 350px;
    background-color: #fff;
    padding: 30px;
}

#loginbox div {
    color: black;
}

#loginbox {
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;
    padding: 30px;
    background-color: white;
    border-radius: 10px;
}
</style>
